<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <div class="home-title-icon">
      <ion-icon name="ios-musical-notes-outline"></ion-icon>
      <ion-icon name="logo-pinterest"></ion-icon>
      <ion-icon name="microphone"></ion-icon>
    </div>
  </ion-navbar>
</ion-header>

<ion-content>
  <div>
    <ion-segment [(ngModel)]="tab">
      <ion-segment-button value="recommend">
        推荐
      </ion-segment-button>
      <ion-segment-button value="friend">
        朋友
      </ion-segment-button>
      <ion-segment-button value="channel">
        电台
      </ion-segment-button>
    </ion-segment>
  </div>

  <div [ngSwitch]="tab">
    <ion-list *ngSwitchCase="'recommend'">
      <ion-item>
        <ion-slides pager autoplay="2000" loop>
          <ion-slide class="recommend-slide">
            <img src="http://img0.imgtn.bdimg.com/it/u=950847525,4267619353&fm=27&gp=0.jpg">
          </ion-slide>
          <ion-slide class="recommend-slide">
            <img src="http://img2.imgtn.bdimg.com/it/u=1452280688,1463242086&fm=27&gp=0.jpg">
          </ion-slide>
          <ion-slide class="recommend-slide">
            <img src="http://img0.imgtn.bdimg.com/it/u=950847525,4267619353&fm=27&gp=0.jpg">
          </ion-slide>
          <ion-slide class="recommend-slide">
            <img src="http://img3.imgtn.bdimg.com/it/u=2274968968,1641684323&fm=27&gp=0.jpg">
          </ion-slide>
          <ion-slide class="recommend-slide">
            <img src="http://img5.imgtn.bdimg.com/it/u=2980549634,1331398231&fm=27&gp=0.jpg">
          </ion-slide>
        </ion-slides>
      </ion-item>
      <div class="recommend-menu-box">
        <div>
          <div class="recommend-menu-icon">
            <ion-icon name="heart"></ion-icon>
          </div>
          <div>私人FM</div>
        </div>
        <div>
          <div class="recommend-menu-icon">
            <ion-icon name="heart"></ion-icon>
          </div>
          <div>每日推荐</div>
        </div>
        <div>
          <div class="recommend-menu-icon">
            <ion-icon name="heart"></ion-icon>
          </div>
          <div>歌单</div>
        </div>
        <div>
          <div class="recommend-menu-icon">
            <ion-icon name="heart"></ion-icon>
          </div>
          <div>排行榜</div>
        </div>
      </div>

      <div class="recommend-title">推荐歌单 ></div>
      <div>
        <div class="recoomend-item-box" *ngFor="let item of recommendList">
          <img class="recommend-cover" src="{{item.picture}}">
          <div>{{item.title}}</div>
        </div>
      </div>

      <div class="recommend-title">最新音乐 ></div>
      <div>
        <div class="recoomend-item-box" *ngFor="let item of recommendList">
          <img class="recommend-cover" src="{{item.picture}}">
          <div>{{item.title}}</div>
        </div>
      </div>

      <div class="recommend-title">主播电台 ></div>
      <div>
        <div class="recoomend-item-box" *ngFor="let item of recommendList">
          <img class="recommend-cover" src="{{item.picture}}">
          <div>{{item.title}}</div>
        </div>
      </div>

      <ion-item>
        <ion-slides>
          <ion-slide>
            <div class="recommend-slide">
              <img style="height: 150px;" class="recommend-slide-img"
                   src="http://img0.imgtn.bdimg.com/it/u=950847525,4267619353&fm=27&gp=0.jpg">
              <div class="recommend-slide-bg"
                   [ngStyle]="{'background': 'url(http://img0.imgtn.bdimg.com/it/u=950847525,4267619353&fm=27&gp=0.jpg) no-repeat', 'background-size': 'cover'}"></div>
            </div>
          </ion-slide>
          <ion-slide>
            <div class="recommend-slide">
              <img style="height: 150px;" class="recommend-slide-img"
                   src="http://img2.imgtn.bdimg.com/it/u=1452280688,1463242086&fm=27&gp=0.jpg">
              <div class="recommend-slide-bg"
                   [ngStyle]="{'background': 'url(http://img2.imgtn.bdimg.com/it/u=1452280688,1463242086&fm=27&gp=0.jpg) no-repeat', 'background-size': 'cover'}"></div>
            </div>
          </ion-slide>
        </ion-slides>
      </ion-item>
    </ion-list>

    <ion-list *ngSwitchCase="'friend'">

      <div>
        <div class="friend-box">
          <img src="/assets/avatar.jpg" class="friend-avatar">
          <div class="friend-info">
            <div>鹿丸</div>
            <div class="friend-info-time">昨天 15:33</div>
            <div class="friend-info-desc">可恶，我这是在哪o(╯□╰)o又双叒叕迷失在人生的道路上了麽。。。</div>
          </div>
        </div>
        <div class="friend-box">
          <img src="/assets/avatar.jpg" class="friend-avatar">
          <div class="friend-info">
            <div>鹿丸</div>
            <div class="friend-info-time">前天 15:33</div>
            <div class="friend-info-desc">可恶，我这是在哪o(╯□╰)o又迷失在人生的道路上了麽。。。</div>
          </div>
        </div>
        <div class="friend-box">
          <img src="/assets/avatar.jpg" class="friend-avatar">
          <div class="friend-info">
            <div>鹿丸</div>
            <div class="friend-info-time">大前天 15:33</div>
            <div class="friend-info-desc">可恶，我这是在哪o(╯□╰)o迷失在人生的道路上了麽。。。</div>
          </div>
        </div>
      </div>


    </ion-list>
    <ion-list *ngSwitchCase="'channel'">
      <ion-item>
        <ion-slides pager autoplay="2000" loop>
          <ion-slide class="recommend-slide">
            <img src="http://img0.imgtn.bdimg.com/it/u=950847525,4267619353&fm=27&gp=0.jpg">
          </ion-slide>
          <ion-slide class="recommend-slide">
            <img src="http://img2.imgtn.bdimg.com/it/u=1452280688,1463242086&fm=27&gp=0.jpg">
          </ion-slide>
          <ion-slide class="recommend-slide">
            <img src="http://img0.imgtn.bdimg.com/it/u=950847525,4267619353&fm=27&gp=0.jpg">
          </ion-slide>
          <ion-slide class="recommend-slide">
            <img src="http://img3.imgtn.bdimg.com/it/u=2274968968,1641684323&fm=27&gp=0.jpg">
          </ion-slide>
          <ion-slide class="recommend-slide">
            <img src="http://img5.imgtn.bdimg.com/it/u=2980549634,1331398231&fm=27&gp=0.jpg">
          </ion-slide>
        </ion-slides>
      </ion-item>
      <div class="recommend-menu-box">
        <div>
          <div class="recommend-menu-icon">
            <ion-icon name="heart"></ion-icon>
          </div>
          <div>私人FM</div>
        </div>
        <div>
          <div class="recommend-menu-icon">
            <ion-icon name="heart"></ion-icon>
          </div>
          <div>每日推荐</div>
        </div>
        <div>
          <div class="recommend-menu-icon">
            <ion-icon name="heart"></ion-icon>
          </div>
          <div>歌单</div>
        </div>
        <div>
          <div class="recommend-menu-icon">
            <ion-icon name="heart"></ion-icon>
          </div>
          <div>排行榜</div>
        </div>
      </div>

      <div class="recommend-title">今日优选 ></div>
      <div>
        <div class="recoomend-item-box" *ngFor="let item of recommendList.slice(3,6)">
          <img class="recommend-cover" src="{{item.picture}}">
          <div>{{item.title}}</div>
        </div>
      </div>

    </ion-list>
  </div>
</ion-content>
